<template lang="jade">
	div.return-bar
		i.iconfont(@click="back()") &#xe668;
		信息
		span.top_right_btn
			i.iconfont(@click="showActionFun()") &#xe6f0;
	div.user-center.detail_top(v-infinite-scroll="down()" , infinite-scroll-disabled="busy", infinite-scroll-distance="10")

		ul.message
			li(v-for=" (index,item) in items " )
				div.title
					span.fr {{item.addtime}}
					{{item.type}}
					i(v-show=" item.status=='0' ")
				div.content.cbox
					span.select.cl(v-show="show_manage")
						input(type="checkbox", class="chk_1", value="{{item.id}}", v-model="newID", id="checkbox_{{item.id}}")
						label(for="checkbox_{{item.id}}") 
					span.txt.cl {{item.contents}}

 
		div.fb_box.cbox(v-show="show_manage")
			span.select.cl
				input(type="checkbox", class="chk_1",  id="checkbox_all")
				label(for="checkbox_all", @click="checkedAll")
			span.cl.btn
				input(type="button", value="删除", @click="delete()") 

	actionsheet(:show.sync="show_action" , :menus="menus1", @on-click-menu="actionClick" )
</template>

<style>
@import '~vux/dist/vux.css';
</style>

<script>
import '../../assets/sass/user/index.scss'
import {Actionsheet} from 'vux'
import {c_message, c_message_delete, c_message_update_read} from '../../config/api'




export default {
	data () {
		return {
			show_action:false,
			newID:[],
			items:[],
			obj:[],
			page:1,
			show_manage:false,
			menus1: {
				1: '全部设为已读',
				2: '批量管理'
			},
		}
	},
	components: {
		Actionsheet
	},

	watch: {//深度 watcher
	  'newID': {
	    handler: function (val, oldVal) { 
	      if (this.newID.length === this.items.length) {
	        this.checked=true;
	      }else{
	        this.checked=false;
	      }
	    },
	    deep: true
	  }
	},

	methods: {
		back(){
			window.history.back();
		},
		showActionFun(){
			this.show_action = !this.show_action;
		},
		actionClick(key){
			var that = this;
			//console.log(key)
			if(key==1){
				that.set_read(function(){
					that.fetch(1);
				});
			}
			else{
				that.show_manage = true;

			}
		},

		down: function() {
			if(this.busy == true || this.items == ''){
				return false;
			} 
			this.busy = true;
			this.fetch(++this.page);
		},

		checkedAll: function() {
			var _this = this;
			//console.log(_this.newID);
			if (this.checked) {//实现反选
				_this.newID = [];
			}else{//实现全选
				_this.newID = [];
				_this.items.forEach(function(item) {
					_this.newID.push(item.id);
				});
			}
		},
		set_read: function (next) {
			//var p_data = {"id":this.newID}
			this.$http({url: c_message_update_read, method: 'POST'}).then(function (){
				this.items = [];
				next();
			})
		},

		delete: function () {
			var nid = "";
			for(var i in this.newID){
				if(nid!="")
					nid = nid +'|' +this.newID[i];
				else
					nid = this.newID[i];
			}
			var p_data = {"id":nid}
			this.$http({url: c_message_delete, data:p_data, method: 'POST'}).then(function (response) {
				//console.log(response.data.data);
				this.items = [];
				this.show_manage = false;
				this.fetch(1);
			});
		},




		fetch: function (page) {
			this.$http({url: c_message+'&number=10&page='+page, method: 'GET'}).then(function (response) {
				
				var obj = response.data;
				if(!obj.status){
					//alert(obj.msg)
					if(obj.code == '10055'){
						sessionStorage.removeItem("login"); 
						this.$route.router.go('/login?from='+this.$route.path.substring(1))
					}
					return;
				}





				//console.log(response.data.data);
				//this.items = response.data.data.list;
				var result = response.data.data
				this.items = this.items.concat(result.list);
				this.busy = false;
				//console.log(this.obj);
			});
		}
	},
	route: {
		activate ( transition ) {
			this.fetch(1);
			transition.next();
		}
	}
}
</script>